<!-- 主题页     -->

<template>
  <div class="topic_box">
    <ul>
      <li lazy-load v-for="item in topicArr" :key="item.id" @click="topicFn()">
        <img :src="item.scene_pic_url" alt="" />
        <p>{{ item.title }}</p>
        <p>{{ item.subtitle }}</p>
        <span>{{ ("¥" + item.price_info) | Rmb }}</span>
      </li>
    </ul>
    <van-pagination v-model="page" :page-count="12" mode="simple" />
  </div>
</template>

<script>
import { getTopicData } from "@/utils/http.js";
export default {
  data() {
    return {
      topicArr: "",
      page: 1,
      size: 6,
    };
  },
  methods: {
    topicFn() {},
  },

  created() {
    getTopicData({ page: 1, size: 6 }).then((res) => {
      console.log(res.data.data.data);
      this.topicArr = res.data.data.data;
    });
  },
};
</script>

<style lang='less'>
.topic_box {
  padding-bottom: 50px;
  ul {
    li {
      width: 100%;
      img {
        width: 100%;
      }
      p {
        width: 375px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 20px;
      }
      span {
        color: red;
        font-size: 20px;
      }
    }
  }
}
</style>